Skip to main content

Exercises: Loops

Many rectangles​

Draw 100 rectangles. Lay them out as you want.

Bonus constraints

Play with the alpha value (transparency) or with the Blend Mode to make it more interesting when rectangles overlap.

Random positions​

Draw 100 ellipses. Try to have more of them near the center of the canvas.

Bonus constraints

Find several ways of having them concentrated near the center. I can think of at least 3 different ways of achieving this result.

Rosace​

Draw a rosace.

Bonus constraints

How to colorize the rosace?

and its fragment shader

Chessboard​

Make a chessboard pattern.

Bonus constraints
  • Can you generalize to any number of grid cells?
  • Can you think of another tiling pattern? Using three colors instead of two for example.
  • Can you do it in less than 10 lines of code? Less than 5?
    • Avoid accumulative variables (compute everything based on the current loop indices instead of having global variables that change from one loop iteration to the next)
    • Use one loop instead of two
      Solution in 10 lines
      Solution in 5 lines

Custom circle​

Draw a circle, but do it by placing each vertex "by hand" using a shape

Bonus constraints

Now that you drew the circle yourself, you have more control and you can alter it!

  • Add a small random offset to each vertex to create a distorted circle (See Method 0 of the example)
  • Add an offset based on the angle of the current vertex to make continuous effects (See Methods 1 and 2 of the example)